<!DOCTYPE HTML>
<html>

<head>
  <title> 资源文件结构</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="static/boostrap/css/bootstrap.css" />
  <link rel="stylesheet" href="static/plugins/bui/bui.css" />
  <link rel="stylesheet" href="static/plugins/layui/css/layui.css" media="all">

  <style type="text/css">
    html,
    body,
    .content,
    #organize {
      height: 100%;
    }

    ul,
    li {
      list-style: none;
      padding: 0px;
    }

    .content {
      margin-left: 0;
      margin-top: 0;
      width: auto;
      padding: 0px 20px 0 20px;
    }

    #myTabContent {
      height: 83%;
    }

    #myTab {
      border-top: 1px solid #EFF3FC;
      border-bottom: 2px solid #EFF3FC;
    }

    #organize>div {
      overflow: hidden;
      height: 97%;
      margin-top: 1%;
    }

    #organize .dictory {
      width: 14%;
      float: left;
      border: 1px solid #EFF3FC;
      height: 99%;
    }

    #organize .dictory>div {
      height: 40px;
      padding: 2% 2%;
      border-bottom: 1px solid #EFF3FC;
      line-height: 40px;
    }

    #organize .dictory>div.title{
      text-align: center;
    }

    #organize .dictory ul li {
      height: 30px;
      line-height: 30px;
    }

    #organize .showDictory {
      width: 84%;
      border: 1px solid #EFF3FC;
      float: right;
      height: 99%;
    }

    #organize .showDictory .operationBtn {
      width: 100%;
      padding: 5px;
    }

    #organize .showDictory .showDetail {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      position: relative;
      overflow-y: auto;
    }

    #organize .showDictory .showDetail table {
      width: 100%;
      text-align: center;
    }

    #organize .showDictory .showDetail table thead tr {
      background: #EFF3FC;
    }

    #organize .showDictory .showDetail table tr th {
      text-align: center;
    }

    #organize .showDictory .showDetail table tr {
      height: 30px;
    }

    #chanceDetail li:first-child input {
      margin-right: 10px;
    }

    #chanceDetail li input {
      margin-right: 14px;
    }

    .table tbody>tr>td {
      border: none;
    }

    .table thead>tr>th {
      border-bottom: 1px solid #ddd;
      border-top: 1px solid #ddd;
    }

    .table td {
      text-align: center;
    }

    /* 左侧树 */
    .bui-tree-list {
      border: none;
    }

    .table-content {
      height: 82%;
      overflow: auto;
    }

    .pag {
      border-top: 1px solid #eeeeee;
      margin-left: 1%;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
      background-color: #1E9FFF;
    }
  </style>
</head>

<body ng-app="myApp" ng-controller="organizeCtrl">
  <div class="content" id="organizeApp">
    <div style="padding: 10px 0;">系统管理>组织管理</div>
    <ul id="myTab" class="nav nav-pills">
      <li class="active">
        <a href="#organize" data-toggle="tab">组织机构</a>
      </li>
      <li>
        <a href="#userMang" data-toggle="tab">用户管理</a>
      </li>
      <li>
        <a href="#jobRole" data-toggle="tab">岗位角色</a>
      </li>
      <li>
        <a href="#authorityMang" data-toggle="tab">权限管理</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade in active" id="organize">
        <div>
          <div class="dictory">
            <div class="title">组织结构树</div>
            <div class="demo-content">
              <div>
                <div id="t1"></div>
              </div>
            </div>
          </div>
          <div class="showDictory">
            <div class="operationBtn row">
              <div class="pull-right">
                <button class="btn btn-primary" ng-click="addDept()">添加</button>
                <button class="btn btn-primary" ng-click="editDept()">编辑</button>
                <button class="btn btn-primary" ng-click="deleteDept()">删除</button>
              </div>
            </div>
            <div class="showDetail row">
              <div id="table" class="table-content">
                <table class="col-sm-12 table table-striped">
                  <thead>
                    <tr>
                      <th width="3%">
                        <input type="checkbox">
                      </th>
                      <th width="25%">部门名称</th>
                      <th width="13%">机构代码</th>
                      <th width="22%">描述</th>
                      <th width="25%">上级部门</th>
                      <th width="25%">用户数</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="item in itemList">
                      <td>
                        <input type="checkbox">
                      </td>
                      <td>{{item.dept}}</td>
                      <td>{{item.code}}</td>
                      <td>{{item.description}}</td>
                      <td>{{item.pDept}}</td>
                      <td>{{item.peoples}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div id="demo7" class="pag"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="userMang">
        用户管理
      </div>
      <div class="tab-pane fade" id="jobRole">
        岗位角色
      </div>
      <div class="tab-pane fade" id="authorityMang">
        权限管理
      </div>
    </div>
  </div>
  <!--添加编辑部门模态框  -->
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              {{modalTitle}}
            </h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-12">
                <form role="form" class="form-horizontal">
                  <div class="form-group">
                    <label for="pDept" class="col-sm-2 control-label">上级部门</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="pDept" ng-model="deptForm.pDept" disabled="disabled"> 
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="name" class="col-sm-2 control-label"><span style="color:#ff0000">*</span>部门名称</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="name" ng-model="deptForm.name" placeholder="请输入部门名称，不可多于30个字符" maxlength="30"> 
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="code" class="col-sm-2 control-label"><span style="color:#ff0000">*</span>机构代码</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="code" ng-model="deptForm.code"> 
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="description" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-10">
                      <textarea type="text" class="form-control" id="description" ng-model="deptForm.description"> 
                      </textarea>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消
            </button>
            <button type="button" class="btn btn-primary" ng-click="addOrEditDept(deptForm)">
               确认
            </button>
          </div>
        </div>
      </div>
  </div>
  <!-- 删除部门模态框 -->
  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              删除部门
            </h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-12">
                  部门删除不可恢复,是否确认删除?
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消
            </button>
            <button type="button" class="btn btn-primary" ng-click="deleteConfirm(id)">
               确认
            </button>
          </div>
        </div>
      </div>
  </div>
  <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="../boostrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>
  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript" src="../plugins/angular/angular.min.js"></script>
  <script type="text/javascript" src="../plugins/bui/seajs/2.3.0/sea.js"></script>
  <script type="text/javascript" src="../plugins/bui/bui/1.1.21/config.js"></script>
  <script type="text/javascript" src="../plugins/layui/js/layui.js"></script>
  <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('organizeCtrl', function ($scope,$http) {
      $scope.addDept = addDeptFunc; //添加部门
      $scope.editDept = editDeptFunc; //编辑部门
      $scope.deleteDept = deleteDeptFunc; //删除部门
      $scope.deptForm = {
        pDept: '',
        name: '',
        code: '',
        description: ''
      };

      //组织机构列表数据
      var itemList = [{
        id: 1,
        dept: "部门名称1",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 2,
        dept: "部门名称2",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      },
      {
        id: 3,
        dept: "部门名称3",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 4,
        dept: "部门名称4",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      },
      {
        id: 5,
        dept: "部门名称5",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 6,
        dept: "部门名称6",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      },
      {
        id: 7,
        dept: "部门名称7",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 8,
        dept: "部门名称8",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 9,
        dept: "部门名称9",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 10,
        dept: "部门名称10",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      },
      {
        id: 11,
        dept: "部门名称11",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }, {
        id: 12,
        dept: "部门名称12",
        code: "YSC1",
        description: "XXXXXXXXXXXXXXXXXXXX",
        pDept: "上级部门",
        peoples: 23
      }];
      //左侧组织结构导航树
      BUI.use('bui/tree', function (Tree) {
        $scope.data = [
          {
            text: '电信（陕西）云计算基地',
            id: '1',
            expanded: true,
            children: [
              {
                text: '销售部',
                id: '11',
                children: [
                  { text: '合同档案', id: '111' },
                  { text: '公文档案', id: '112' },
                  { text: '建党档案', id: '113' },
                  { text: '工会档案', id: '114' }
                ]
              },
              {
                text: '办公室',
                id: '12',
                children:[]
              },
              {
                text: '运营支撑部',
                id: '13',
                children:[]
              },
              {
                text: '维护部',
                id: '14',
                children: [
                  { text: '合同档案', id: '141' },
                  { text: '公文档案', id: '142' },
                  { text: '建党档案', id: '143' },
                  { text: '工会档案', id: '144' }
                ]
              }
            ]
          }];
        var tree = new Tree.TreeList({
          render: '#t1',
          nodes: $scope.data
        });
        tree.render();

        tree.on('itemclick', function (ev) {
          var item = ev.item;
          $('.log').text(item.text);
        });
      });

      //分页 
      layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
          , layer = layui.layer;

        laypage.render({
          elem: 'demo7'
          , count: itemList && itemList.length ? itemList.length : 0
          , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
          , jump: function (obj) {
            $scope.itemList = itemList.slice((obj.curr - 1) * obj.limit, obj.curr * obj.limit - 1);
            $scope.$digest();
          }
        });

      });
      
      //添加部门
      function addDeptFunc(){
        $scope.modalTitle = "添加部门";
        $scope.deptForm.pDept = $scope.data[0].text;
        //打开模态框
        $('#addModal').modal();
      }
      //编辑部门
      function editDeptFunc(){
        $scope.modalTitle = "编辑部门";
        $scope.deptForm.pDept = $scope.data[0].text;
        //打开模态框
        $('#addModal').modal();
      }
      //删除部门
      function deleteDeptFunc(){
        $('#deleteModal').modal();
        // 确认删除部门
        $scope.deleteConfirm = function(id){
          $('#deleteModal').modal('hide');
        };
      }
      //添加部门或编辑部门确认按钮
      $scope.addOrEditDept = function(form){
        $('#addModal').modal('hide');
        //发送请求保存数据
        // $http.post('url',form).then(
        //   function(resp){

        //   },
        //   function(resp){
        //     alert("接口请求失败");
        //   });
      };
    });

  </script>
  <body>

</html>